<template>
  <!-- 模板内容：只能有一个div  -->
  <div class="box">
    <!-- 头部内容导航栏 -->
    <div class="navbar">
      <!-- 第一个大盒子内容 -->

      <div class="Sul">
        <ul>
          <div class="nav_first">
            <span class="Bspan"><van-icon name="clock-o" />本周</span>
            <h3 class="Bh3">尚未开始阅读</h3>
            <p class="Bp">阅读一分钟可领无限卡</p>
          </div>
          <li class="Sdiv" v-for="(item, index) in list" :key="index">
            <div>
              <img :src="item.imgSrc" alt="" />
              <span>{{ item.bookName }}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "app",
  data() {
    return {
      list: [],
    };
  },
  methods: {
    async fn_getData() {
      let { data } = await axios.get("./wechatBook.json");
      this.list = data.reading;
    },
  },
  created() {
    this.fn_getData();
  },
};
</script>

<style scoped>
/* css样式 */
.box {
  overflow: hidden;
  width: 100%;
}
.navbar {
  width: 185%;
  display: flex;
  overflow: auto;
  position: relative;
}
.Sul::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.nav_first {
  background: #fff;
  width: 3rem;
  /* flex-basis: 25%; */
  height: 2.05rem;
  justify-content: start;
  margin-left: 0.35rem;
  border-radius: 0.2rem;
  position: relative;
}
.Bspan {
  position: absolute;
  top: 0.25rem;
  font-size: 0.25rem;
  padding-left: 0.2rem;
}
.Bh3 {
  position: absolute;
  font-size: 0.3rem;
  top: 0.4rem;
  padding-left: 0.2rem;
  font-weight: normal;
}
.Bp {
  width: 100%;
  height: 0.5rem;
  line-height: 0.5rem;
  position: absolute;
  font-size: 0.2rem;
  bottom: -0.2rem;
  border-radius: 0rem 0rem 0.1rem 0.1rem;
  text-align: center;
  background: #0293fc;
}
.Sul {
  flex-basis: 60%;
  /* display: flex; */
  position: relative;
  overflow: auto;
}
.Sul ul {
  width: 215%;
  display: flex;
}
.Sdiv {
  position: relative;
  width: 1.5rem;
  margin-left: 0.2rem;
}
.Sdiv img {
  width: 100%;
  height: 2.04rem;
  border-radius: 0.1rem;
}
.Sdiv span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  height: .4rem;
  position: absolute;
  font-size: 0.14rem;
  top: 1.65rem;
  left: 0;
  z-index: 9999;
  text-align: center;
  background: #ccc;
  border-radius: 0rem 0rem 0.1rem 0.1rem;
  color: #fff;
  background-color: rgba(102, 102, 102, 0.7);
}

/* .Sdiv {
  position: relative;
  width: 1.5rem;
}
.Sdiv img {
  width: 100%;
  height: 2.04rem;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 0.1rem;
}
.Sdiv span {
  width: 100%;
  position: absolute;
  font-size: 0.2rem;
  top: 1.72rem;
  z-index: 9999;
  text-align: center;
  background: #ccc;
  border-radius: 0rem 0rem 0.1rem 0.1rem;
  color: #fff;
  background-color: rgba(179, 185, 181, 0.7);
}
.Sul {
  margin-left: 0.2rem;
} */
</style>